.filter {
  .content {
    z-index: 2;
    position: fixed;
    bottom: 0%;
    width: 100%;
    background: linear-gradient( 180deg, #FFFFFF 0%, #F7F8FC 100%);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    .title {
      display: flex;
      justify-content: center;
      height: 40rpx;
      padding: 35rpx 0 33rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
      font-style: normal;
    }
    .category {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0 43rpx 58rpx 46rpx ;
      .sidebar {
        width: 192rpx;
        height: 540rpx;
        padding: 32rpx 11rpx;
        background: #EBEDF6;
        border-radius: 12rpx;
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 21rpx 13rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #141414;
          font-style: normal;
          .icon {
            width: 3rpx;
            height: 23rpx;
            margin-left: 10rpx;
            background: #827CF9;
          }
          .text {
            width: 100%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .choose {
          background: #FFFFFF;
          border-radius: 18rpx;
        }
      }
      .cate-detail {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 39rpx;
        padding-top: 11rpx;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 206rpx;
          margin-bottom: 26rpx;
          background: #EBEDF6;
          border-radius: 45rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #141414;
          font-style: normal;
          .text {
            padding: 20rpx;
          }
        }
        .choose {
          background: #827CF9;
          color: #FFFFFF;
        }
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      margin-bottom: 44rpx;
      .reset,
      .done {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .reset {
        width: 310rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 48rpx 0rpx 0rpx 48rpx;
        border: 2rpx solid #827CF9;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #9797FF;
      }
      .done {
        width: 310rpx;
        height: 80rpx;
        background: #827CF9;
        border: 2rpx solid #827CF9;
        border-radius: 0rpx 48rpx 48rpx 0rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
      }
    }
  }
}